<template>
  <div class="main">
    <div class="header">
      <ul class="data">
        <li>员工账号：<el-input v-model="params.account" style="width:60%" placeholder="请输入员工账号" /></li>
        <li>员工姓名：<el-input v-model="params.name" style="width:60%" placeholder="请输入员工姓名" /></li>
        <li>工作模式：
          <el-select v-model="params.work" placeholder="请选择工作模式">
            <el-option style="height:auto" value="">
              <el-option
                v-for="item in workms"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-option>
          </el-select>
        </li>
      </ul>
      <ul class="data">
        <li>月份：<el-date-picker
          v-model="params.month"
          type="month"
          placeholder="请选择月份"
        /></li>
        <li>所属机构：
          <!-- <el-input v-model="data.agentId" style="width:70%" /> -->
          <el-select v-model="params.agencyId" placeholder="请选择所属机构">
            <el-option style="height:auto" value="">
              <el-tree :data="options" :props="defaultProps" @node-click="handleNodeClick" />
            </el-option>
          </el-select>
        </li>
        <li>
          <el-button style="background-color: #e15536" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>

        </li>
      </ul>
    </div>
    <div class="body">
      <el-button type="danger">排版设置</el-button>
      <el-button type="danger" plain>绑定排班</el-button>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          label="员工账号"
          width="100"
          prop="account"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>
        <el-table-column
          prop="name"
          label="员工姓名"
          width="100"
        />
        <el-table-column
          prop="mobile"
          label="员工电话"
          width="110"
        />
        <el-table-column
          prop="roleNames"
          label="员工角色"
          width="100"
        />
        <el-table-column
          label="当前工作模式"
          width="110"
        >
          <template v-slot="{ row }">
            <span v-if="row.status === 1">周末双休</span>
            <span v-else-if="row.status === 0"><span style="color: red">·</span>全月无休</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="1"
          width="80"
        >
          <template><div>上</div></template>
        </el-table-column>
        <el-table-column
          label="2"
          width="80"
        >
          <template><div>上</div></template>
        </el-table-column>
        <el-table-column
          label="3"
          width="80"
        >
          <template><div>上</div></template>
        </el-table-column>
        <el-table-column
          label="4"
          width="80"
        >
          <template><div>上</div></template>
        </el-table-column>
        <el-table-column
          label="5"
          width="80"
        >
          <template><div>上</div></template>
        </el-table-column>
        <el-table-column
          label="6"
          width="90"
        >
          <template><div>上</div></template>
        </el-table-column>

      </el-table>
      <el-pagination
        :current-page.sync="params.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span> 版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span> 苏ICP备16007882号-11</span>
    </div>
  </div>

</template>

<script>
import { getAllWorkmoshi } from '@/api/workmoshi'
import { getJigou } from '@/api/jigou'
import { getYuan } from '@/api/employee'
export default {
  data() {
    return {
      workms: [],
      options: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      state: '',
      tableData: [],
      multipleSelection: [],
      total: 10,
      params: {
        month: '',
        work: '',
        account: '',
        name: '',
        phone: '',
        agencyId: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
  },
  created() {
    this.getYuan()
    this.getJigou()
    this.getAllWorkmoshi()
  },
  methods: {

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 获取树状机构信息
    async getJigou() {
      const res = await getJigou()
      // console.log(JSON.parse(res.data))
      this.options = JSON.parse(res.data)
    },
    async search() {
      this.params.page = 1
      await this.getYuan()
      this.reset()
    },
    // 下拉树形图操作
    handleNodeClick(data) {
      // console.log(data)
      this.params.agencyId = data.name
    },
    // 换每页几条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.params.page = 1
      // console.log(this.params.page)
      this.params.pageSize = val
      this.getYuan()
    },
    // 换页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.params.page = val
      this.getYuan()
    },
    // 获取员工分页数据
    async  getYuan() {
      const res = await getYuan(this.params)
      // console.log(res.data)
      this.total = Number(res.data.counts)
      this.tableData = res.data.items
    },
    async getAllWorkmoshi() {
      const res = await getAllWorkmoshi()
      this.workms = res.data[1]
      console.log(this.workms)
    },

    // 清除表单
    reset() {
      // console.log(1)
      this.params = {
        account: '',
        name: '',
        phone: '',
        agencyId: '',
        page: 1,
        pageSize: 10
      }
    }
  }
}
</script>

<style lang="scss" scoped>
li{

  list-style: none;

}
.main{
background-color: #f3f4f7;
padding: 0 20px;
.header{
 padding:  20px 30px 0 30px;
  background-color: #fff;
border-radius: 5px;
.data{
  margin: 0;
  padding: 0;
  padding-bottom:20px ;
  display: flex;
  justify-content: space-between;
  li{
    width: 30%;
    line-height: 40px;
  display: flex;
  align-content: center;
  }
}
}
.body{
   padding:  20px 30px 0 30px;
   background-color: #fff;
.el-pagination{
  padding:20px 0 20px 0 ;
display: flex;
justify-content: center;
          }
   }
   .footer{
display: flex;
justify-content: center;
margin-top:20px;
padding-bottom: 20px;
span{
padding:0 10px;
color: #bac0d6;
}
   }
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>>

